<template>
  <!-- 圆环饼图 -->
  <div class="ease-pie3-box">
    <v-chart :options="newOption"
             :auto-resize="true"
             @click="toPages"
             class="ease-pie3" />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { EChartOption } from "echarts";
import lodash from 'lodash'
@Component({
  components: {},
})
export default class extends Vue {
  @Prop({ default: () => [] })
  colorList: Array<any> | undefined;
  @Prop({ default: () => [] })
  dataList: Array<any> | undefined;
  public option: EChartOption = {
    tooltip: {
      trigger: "item",
      borderColor: "rgba(255,255,255,.3)",
      backgroundColor: "rgba(13,5,30,.6)",
      borderWidth: 1,
      padding: 5,
      formatter: function (parms: any) {
        var str =
          parms.marker +
          "" +
          parms.data.name +
          "</br>" +
          "数量：" +
          parms.data.value +
          "</br>" +
          "占比：" +
          parms.percent +
          "%";
        return str;
      },
    },
    legend: {
      left: "center",
      bottom: "5%",
      orient: "vertical",
      textStyle: {
        color: "#fff",
      },
    },
    series: [
      {
        type: "pie",
        center: ["50%", "40%"],
        radius: ["40%", "65%"],
        // clockwise: true,
        // avoidLabelOverlap: true,
        hoverOffset: 15,
        itemStyle: {
          normal: {
            color: (params: any) => {
              return (this as any).colorList[params.dataIndex];
            },
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        label: {
          position: "inside",
          fontSize: 14,
          formatter: "{c}",
        },
        data: [],
      },
    ],
  };
  public toPages(val: any): void {
     this.$emit("click", val);
     
  }
   get newOption(){
   let option= lodash.cloneDeep(this.option) 
   option.series[0].data=this.dataList
   return option

 }
  mounted() {}
}
</script>

<style lang="scss" scoped>
.ease-pie3-box {
  width: 100%;
  height: 100%;
  .ease-pie3 {
    width: 100%;
    height: 100%;
  }
}
</style>